import { Modal } from 'antd';
import React from 'react';
import LwjTable from 'components/LwjTable/LwjTable'
import moment from 'moment';
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand'

const SearchResourcesModal = ({
  dataSource,
  pagination,
  dispatch,
  toBeBoundResources,
  ...ModalProps,
}) => {

  const listProps = {
    dataSource,
    pagination,
    pageChangeAction: 'role/queryResources',
    dispatch,
    selectedRowKeys: toBeBoundResources,
    selectType: 'multiple',
    onSelectRows(selectedRowKeys, selectRows) {
      dispatch({
        type: 'role/updateToBeBoundResources',
        payload: { toBeBoundResources: selectedRowKeys }
      });
    }
  };

  const columns = [
    {
      title: '资源名称',
      dataIndex: 'name',
      key: 'name',
      align: "left"
    }, {
      title: '资源URL',
      dataIndex: 'url',
      key: 'url',
      align: "left"
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: "left",
      render: (text, record, index) => (moment(record.createTime).format("YYYY-MM-DD HH:mm:ss"))
    }
  ];

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'name',
        title: '资源名称'
      },
      {
        type: 'input',
        id: 'url',
        title: '资源URL'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'role/queryResources',
        payload: {
          ...value
        }
      })
    }
  }

  return (
    <div>
      <Modal {...ModalProps}>
        <OrderFilterUnExpand {...filterProps} />
        <LwjTable
          {...listProps}
          columns={columns} />
      </Modal>
    </div >
  );
};

export default SearchResourcesModal;
